/*
 * @Author: CPS
 * @Date: 2020-08-07 16:22:19
 * @Last Modified by: CPS
 * @Last Modified time: 2020-08-13 00:15:51
 * @Projectname Electron-fileWatcher
 * @file_path D:\CPS\MyProject\Electron-fileWatcher\src\renderer\pages\fileWatcher\js\config\openexec.js
 * @Filename openexec.js
 */
'use strict'
import './template/openexec.stylus'
import template from './template/openexec.pug'
import icon from './icon/icon.js'

// 定义组件前缀名
function prefix(name) {
  return 'config__openexec-' + name
}

class openexecObject {
  constructor(container, data) {
    this.el = this.content = this.data = null

    this.init(container, {
      data: data,
      icon: icon
    })
  }

  init(container, data) {
    // 创建元素实例
    this.el = document.createElement('section')
    this.el.className = this.el.id = prefix('container')
    container.appendChild(this.el)
    this.el.innerHTML = template(data)

    // 延时弹出页面(因为使用 innerHTML的实例生成需要更新DOM)
    setTimeout((tar) => {
      tar.style.opacity = 1
      tar.style.transform = 'translate(0)'
    }, 200, this.el)

    this.el.addEventListener('click', (e) => {
      let tar = e.target.id ? e.target.id : e.target.className
      let exit = [prefix('btngroup'), prefix('eachitem')]
      switch (tar) {
        case '123':
          this.show()
          break;
        default:
          if (exit.indexOf(tar) != -1) {
            this.show()
          }
          break;
      }
    }, true)
  }

  /*显示元素,或者显示子页面元素*/
  show(pageName = '', data) {
    if (!this.el) return console.log(this.prefix + '未初始化')

    if (this.el.style.transform == 'translate(150%)') {
      this.el.style.opacity = 1
      this.el.style.transform = 'translate(0)'
    } else {
      this.el.style.opacity = 0
      this.el.style.transform = 'translate(150%)'
    }
  }

  send(action, data = null) {
    let e
    if (data) {
      e = new Event(action)
    } else {
      e = new CustomEvent(action, {
        detail: {
          data,
        },
        bubbles: false, //是否冒泡
        cancelable: false //是否取消默认事件
      })
    }
    this.el.dispatchEvent(e)
  }
}
export default openexecObject